<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构-- */
		</style>
	</head>
	<body>
		<!-- html结构，结构化标记【语义化标签】 
		aside元素 针对：左栏、广告、弹出效果。。。。有利于SEO优化
		之前版本通过div+id起别名方式【缺点：繁琐、定义起名、沉余】
		-->
		<aside>
			<ul class="sidebar">
				<!-- 弹出框 -->
				<div class="out"></div>
				<li>手机</li>
				<li>电脑</li>
				<li>家具</li>
				<li>男装</li>
				<li>女装</li>
				<li>美妆</li>
				<li>房产</li>
				<li>母婴</li>
				<li>食品</li>
			</ul>
		</aside>
	</body>
</html>